<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h3>v-for迭代数组</h3>
        <ul>
            <li v-for="(emp,index,arr) in emps" :key="index">
                id:{{}}, 姓名: {{emp.name}}, 工资:{{emp.salary}}
                {{arr}}
            </li>
        </ul>
        <h3>v-for迭代对象</h3>
        <ul>
            <li v-for="(value,key,index) in user" :key="index">
                第{{index + 1}}属性{{key}}是{{value}}
            </li>
        </ul>
        <h3>v-for与v-if搭配使用</h3>
        <ul>
            <!-- <li v-for="(emp,index,arr) in emps" :key="index">
                {{emp.name}}-{{emp.salary}}
            </li> -->
            <!-- 需求：工资大于4000的不显示 上面代码在vue3中需要拆分需要用到template标签-->
            <template v-for="(e,index) in emps" :key="index">
                <li v-if="e.salary &gt; 4000">{{e.name}}-{{e.salary}}</li>
            </template>

        </ul>

    </div>
</body>

<script>
    const {createApp} = Vue;
    const app = createApp({
        data() {
            return {
                emps: [
                    {name:"马云",salary: 1000},
                    {name:"马化腾",salary: 12000},
                    {name:"雷军",salary:4000},
                ],
                user: {
                    username: "zhansgan",
                    password: "123456"
                }
            }
        },
        methods: {
            
        }
    }).mount("#app");
</script>
</html>